<template>
  <div class="content">
    <div class="content-block">
      <Navigation
          :navigation-list="[{id:1,value:'首页',url:'/home/index'},{id:2,value:'直播预告',url:''}]"></Navigation>
      <div class="information-block">
        <div class="title-block">
          <div class="top-block">
            <div class="title">{{detail.title }}</div>
            <div class="time-block">
              <img src="@/assets/images/jobFair/shijian.png" class="iconfont">
              <div class="name">开播时间：{{ detail.startTime }}</div>
            </div>
          </div>
        </div>
        <div class="active-block">
          <div class="block-title">
            <div class="line"></div>
            <div class="title" :class="tabActive===1?'active':''" @click="tabActive=1">直播介绍</div>
            <div class="title" :class="tabActive===2?'active':''" @click="tabActive=2">热招职位</div>
            <div class="title" :class="tabActive===3?'active':''" @click="tabActive=3">热门公司</div>
          </div>
          <template v-if="tabActive===1">
              <div class="article-content" v-html="detail.introduce"></div>
          </template>
          <div v-if="tabActive===2" class="job-block">
            <template v-if="detail.enterpriseList.length">
              <template v-for="(item,index) in detail.enterpriseList">
                <router-link :key="item1.id" v-for="item1 in item.jobPublishList" :to="{name:'positionDetail',query:{id:item1.id}}"
                             class="position-item">
                  <div class="info-block">
                    <div class="info">
                      <div class="info-item">
                        <div class="position-name">{{item1.jobTitle}}</div>
                        <div v-if="item1.salaryNegotiable==1" class="wage">面议</div>
                        <div v-else class="wage">{{item1.minSalary }}-{{ item1.maxSalary}}元</div>
                      </div>
                      <div class="address-item">
                        <div class="position-address">{{item1.jobAddress }}</div>
                        <div class="position-label-block" v-if="item.welfare&&item.welfare.split(',').length>0">
                          <div class="position-label-item" v-for="(item2) in item.welfare.split(',')">{{item2}}</div>
                        </div>
                        <div class="position-label-block" v-else>
                          <div class="position-label-item">面议</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="company-block">
                    <div class="company-photo">
                      <img :src="item.logoUrl" alt="" @error="imgError(index)">
                    </div>
                    <div class="company-info">
                      <div class="company-name">{{ item.enterpriseName }}</div>
                      <div class="company-other">{{ item.enterpriseIntroduction }}</div>
                    </div>
                  </div>
                </router-link>
              </template>
            </template>
            <el-empty v-else></el-empty>
          </div>
          <div v-if="tabActive===3" class="job-block">
            <template v-if="detail.enterpriseList.length>0">
              <router-link :key="item.id" v-for="item in detail.enterpriseList" :to="{name:'company',query:{id:item.id,}}"
                           class="position-item">
                <div class="company-block" style="padding-top: 0">
                  <div class="company-photo">
                    <img :src="item.logoUrl" alt="">
                  </div>
                  <div class="company-info">
                    <div class="company-name">{{ item.enterpriseName }}</div>
                    <div class="company-other">{{ item.enterpriseIntroduction }}</div>
                  </div>
                </div>
              </router-link>
            </template>
            <el-empty v-else></el-empty>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navigation from "@/components/Navigation/Navigation";
import {livePortendDetailed} from "@/api/live";

export default {
  name: "JobFair",
  components: {Navigation},
  data() {
    return {
      detail: {
        title: '',
        startTime: '',
        enterpriseList: [],
        introduce:''
      },
      tabActive: 1,
      id:null,
    }
  },
  methods: {
    getDetail(){
      livePortendDetailed({id:this.id}).then((data)=>{
        this.detail=data;
      })
    },
    imgError(index){
      this.position[index].logoUrl=process.env.VUE_APP_COM_URL
    },
  },
  mounted() {
    this.utils.createParams(this, this.$route.query);
    this.getDetail();
  }
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #F6F6F8;

  .content-block {
    width: $contentWidth;
    margin: 0 auto;
    min-height: $fullMinHeight;

    .information-block {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .title-block {
        width: calc(100% - 900px);

        .top-block {
          background-color: #fff;
          padding: 20px;
          border-radius: 10px;

          .title {
            font-size: 21px;
            font-weight: bold;
            border-bottom: 1px solid #e4e4e4;
            padding-bottom: 10px;
          }

          .time-block {
            display: flex;
            flex-direction: row;
            display: flex;
            align-items: center;
            margin-top: 10px;

            .iconfont {
              width: 15px;
              height: 15px;
              margin-right: 10px;
            }

            .name {
              font-size: 14px;
            }
          }
        }

        .bottom-block {
          margin-top: 20px;
          background-color: #fff;
          padding: 10px;
          border-radius: 10px;
          display: flex;
          flex-direction: row;
          margin-bottom: 20px;

          .job-item {
            display: flex;
            flex-direction: column;
            width: calc(100% / 4);
            align-items: center;
            border-right: #f0f0f0 1px solid;

            .job-name {
              font-size: 14px;
              margin-bottom: 10px;
              margin-top: 5px;
            }

            .count-item {
              display: flex;
              flex-direction: row;

              .count {
                color: $orange;
                font-size: 18px;
                font-weight: bold;
                margin-right: 2px;
              }

              .job-name {
                font-size: 14px;
              }
            }
          }

          .job-item:last-child {
            border-right: none;
          }
        }
      }

      .active-block {
        width: calc(100% - 320px);
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 20px;
        position: relative;
        .block-title {
          width: 100%;
          height: 70px;
          display: flex;
          flex-direction: row;
          align-items: center;
          padding: 0 30px;
          background: #fff;
          border-radius: 5px;
          cursor: pointer;

          .line {
            height: 23px;
            width: 10px;
            background: $orange;
            border-radius: 20px;
            margin-right: 10px;
          }

          .title {
            font-size: 20px;
            margin-right: 15px;
            color: $darkGray;
            font-weight: bold;
          }

          .title.active,
          {
            color: $orange;

          }
        }

        .article-content {
          padding: 0 30px;
          font-size: 20px;
          line-height: 35px;
          text-indent: 40px;
        }

        .job-block {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          padding: 20px;

          .position-item {
            height: auto;
            width: calc((100% - 40px) / 2);
            padding: 20px;
            display: flex;
            flex-direction: column;
            background: #fff;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 20px;
            margin-bottom: 20px;
            box-shadow: 0 0 15px 0 #d8d8d8;
            .info-block {
              border-bottom: 1px solid $lightGray;
              display: flex;
              flex-direction: row;
              height: 60%;

              .info {
                width: 100%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                .info-item{
                  display: flex;
                  flex-direction: row;
                  .position-name {
                    font-size: 19px;
                    width: 220px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                  .wage {
                    width: 180px;
                    color: $orange;
                    font-weight: bold;
                    font-size: 17px;
                    display: flex;
                    flex-direction: row;
                    flex-grow: 1;
                  }
                }
                .address-item{
                  display: flex;
                  flex-direction: column;
                  width: 100%;
                  .position-address {
                    width: 100%;
                    font-size: 12px;
                    color: $darkGray;
                    margin: 15px 10px 15px 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }

                  .position-label-block {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    margin-bottom: 10px;

                    .position-label-item {
                      margin-right: 10px;
                      margin-bottom: 10px;
                      height: 25px;
                      color: $darkGray;
                      background: $lightGray;
                      padding: 4px 8px;
                      font-size: 13px;
                    }
                  }
                }

              }
            }

            .company-block {
              display: flex;
              flex-direction: row;
              padding-top: 15px;
              align-items: center;

              .company-photo {
                width: 50px;
                height: 50px;
                border: 1px solid $lightGray;
                margin-right: 15px;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

              .company-info {
                width: calc(100% - 65px);
                display: flex;
                flex-direction: column;
                justify-content: center;

                .company-name {
                  font-size: 15px;
                }

                .company-other {
                  overflow:hidden;
                  text-overflow:ellipsis;
                  display:-webkit-box;
                  -webkit-box-orient:vertical;
                  -webkit-line-clamp:2;
                  font-size: 12px;
                  color: $darkGray;
                  margin-top: 10px;
                }
              }
            }
          }

          .position-item.more {
            align-items: center;
            justify-content: center;
            font-size: 15px;

            .more {
              margin-top: 8px;
              font-size: 14px;
              color: $orange;
              cursor: pointer;
            }
          }

          .position-item:nth-child(3n) {
            margin-right: 0;
          }
        }

        .btn2 {
          width: 180px;
          height: 45px;
          margin: 30px auto;
        }
      }
    }
  }
}
</style>
